<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				需求：自定义一个v-big指令，功能和v-text类似，但是能把值放大10倍后呈现。
				自定义指令总结：
						一、定义语法：
									(1).局部指令：
												new Vue({
													...
													directives{指令名:回调函数}
													...
												})
									(2).全局指令：
												Vue.directive(指令名,回调函数)

						二、备注：
									1.指令定义时不加v-，但使用时必须要加v-；
									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>
				当前的n是：<span v-text="n"></span>
			</h2>
			<hr>
			<h2>
				当前n值放大10倍后是：<span v-big="n"></span>
			</h2>
			<h2>
				当前n值放大100倍后是：<span v-atguigu-very-big="n"></span>
			</h2>
			<button @click="n++">n+1</button>
		</div>

		<hr/>

		<div id="root2">
			<h2 v-big="x"></h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		//定义一个全局的指令：v-big
		Vue.directive('big',function(element,{value}){
			if(typeof(value) !== 'number'){
				throw 'v-big指令使用错误，需要传递一个数字'
				return
			}
			console.log(this)//严重注意：此处的this不是vm，是window！！！！！
			console.log('---big---',element,value)
			//操作DOM
			element.innerText = value*10
			element.style.color = 'orange'
			element.style.background = 'gray'
		})

		new Vue({
			el:'#root',
			data:{
				n:1
			},
			directives:{
				//v-big的本质是一个函数，何时调用：v-big指令所在标签被解析时
				/* big(element,{value}){
					console.log(this)//严重注意：此处的this不是vm，是window！！！！！
					console.log('---big---',element,value)
					//操作DOM
					element.innerText = value*10
					element.style.color = 'orange'
					element.style.background = 'gray'
				}, */
				'atguigu-very-big'(element,{value}){
					element.innerText = value*100
				}
			}
		})
		
		new Vue({
			el:'#root2',
			data:{
				x:4
			}
		})
		
	</script>
</html>